/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/

//  1.默认加载学员信息列表 发送ajax请求
const studentData = () => {
    axios({
        url: '/student/list',
        method: 'get',
    }).then(res => {
        //成功回调
        console.log(res)
        let arr = res.data.data
        document.querySelector('tbody').innerHTML = arr.map(item => `
        <tr>
            <th scope="row">${item.id}</th>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.group}</td>
            <td>${item.phone}</td>
            <td>${item.salary}</td>
            <td>${item.truesalary}</td>
            <td>${item.province + item.city + item.county}</td>
            <td>
            <button type="button" data-id="${item.id}" class="btn btn-primary btn-sm">修改</button>
            <button type="button" data-id="${item.id}" class="btn btn-danger btn-sm">删除</button>
            </td>
      </tr>
        `).join('')
    })
}
studentData()

/* 2.添加学员 ：出现弹窗 */
document.querySelector('.btn-primary').addEventListener('click', function (e) {
    e.preventDefault()
})
document.querySelector('.btnAddStu').addEventListener('click', function () {
    //(1)设置模态框标题和按钮文字
    document.querySelector('.addModalLabel').innerHTML = '录入新学员'
    document.querySelector('.btnAddStudent').innerText = '确认添加'
    //(1)展示模态框
    $('#addModal').modal('show')
    //(2)渲染省列表
    getPaovince()
})

/* 3.省市县三级联动  : 省市县必须要依次选择
        (1)加载省条件 : 点击添加学员，出现弹窗后。默认加载省
        (2)加载市条件 : 用户选择了某一个省
        (3)加载县条件 : 用户选择了某一个市*/

//  3.1 省联动
//  这个功能需要先弹出模态框才能使用，而不是一开始就默认加载。  因此可以封装成函数调用
const getPaovince = () => {
    axios({
        url: '/geo/province',
        method: 'get',
    }).then(res => {
        //成功回调
        console.log(res)
        //  渲染省数据
        //  (1) 先把服务器返回的数据渲染成数组
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //  (2)在数组最前面添加默认option标签
        arr.unshift(`<option value="">--省--</option>`)
        //  (3)数组拼接之后渲染到页面
        document.querySelector('[name="province"]').innerHTML = arr.join('')
    })
}


//  3.2加载市，监听省change事件
document.querySelector('[name="province"]').addEventListener('change', function () {
    // (1)获取当前选择的省
    const pname = this.value
    // (2)只要用户修改了省，之前选择的市和县都要恢复默认值
    document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option value="">--区/县--</option>`
    // (3)如果用户没有选择省，不需要加载市数据
    if (pname == '') {
        return
    }
    axios({
        url: '/geo/city',
        method: 'get',
        params: { pname }
    }).then(res => {
        //成功回调
        console.log(res)
        //  渲染市数据
        //  (1) 先把服务器返回的数据渲染成数组
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //  (2)在数组最前面添加默认option标签
        arr.unshift(`<option value="">--市--</option>`)
        //  (3)数组拼接之后渲染到页面
        document.querySelector('[name="city"]').innerHTML = arr.join('')
    })
})


//  3.3加载县/区，监听省change事件
document.querySelector('[name="city"]').addEventListener('change', function () {
    // (1)获取当前选择的省和市
    const pname = document.querySelector('[name="province"]').value
    const cname = this.value
    // (2)只要用户修改了市，之前选择的县就要恢复默认值
    document.querySelector('[name="county"]').innerHTML = `<option value="">--区/县--</option>`
    // (3)如果用户没有选择市，不需要加载县/区数据
    if (cname == '') {
        return
    }
    // (4)发送ajax
    axios({
        url: '/geo/county',
        method: 'get',
        params: { pname, cname }
    }).then(res => {
        //成功回调
        console.log(res)
        //  渲染市数据
        //  (1) 先把服务器返回的数据渲染成数组
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //  (2)在数组最前面添加默认option标签
        arr.unshift(`<option value="">--区/县--</option>`)
        //  (3)数组拼接之后渲染到页面
        document.querySelector('[name="county"]').innerHTML = arr.join('')
    })
})

/* 4.点击重置按钮：重置表单
不需要写js ：form表单中的按钮如果type为resset，则点击按钮会自动重置表单 
*/


/* 5.点击确认添加：添加学员
    * 非空 + 正则服务器会帮我们自动处理
    * form表单按钮，需要阻止默认跳转*/

document.querySelector('.btn-primary').addEventListener('click', function (e) {
    //  0.阻止表单默认跳转
    e.preventDefault()
    //  1.获取表单所有的参数
    /* FormData()对象有两种工作模式
        第一种(手动) ：创建空的formdata对象，使用append()方法手动追加参数
            (1) let fd = new FormData
            (2) fd.append('参数名',参数值)
        第二种(自动) ：使用form表单来创建FormData，会自动遍历form中的每一个表单元素，将
        name属性作为参数名，将表单的value值作为参数值，一键自动处理
            let fd = new FormData(form表单)
        */
    let fd = new FormData(document.querySelector('.add-form'))

    /*注意点 ：虽然可以用formdata一件获取表单所有参数，但是这个接口不能直接发formdata
        原因 ：formdata会自动修改请求头为文件格式请求头，而我们这个接口不需要修改请求头
        总结 ：
            (1) 如果这个表单里面有文件数据，则可以直接使用formdata
            (2) 如果这个表单里面没有文件，需要自己吧formdata里面的数据取出来放到对象中
    */

    let obj = {}
    //  FormData对象不能直接打印，需要用forEach才可以看到里面的数据
    fd.forEach((item, index) => {
        console.log(`${index}:${item}`)//  index:属性名   item:属性值
        obj[index] = item
    })
    //  判断是新增ajax还是编辑ajax
    let url = '/student/add'
    let method = 'post'
    if (this.innerHTML == '确认编辑') {
        url = '/student/update'
        method = 'put'
        obj.id = this.dataset.id
    }
    //  2.发送ajax
    axios({
        url,
        method,
        data: obj
    }).then(res => {
        //  成功回调
        console.log(res)
        Toast.success(res.data.message)
        //  清空表单
        document.querySelector('[type="reset"]').click()
        //  确认添加完默认关闭窗口
        document.querySelector('.btn-close').click()
        //  重新加载列表
        studentData()
    }).catch(err => {
        Toast.fail(err.response.data.message)
    })
})

//  6.删除学员 ：动态新增的元素，需要注册委托事件
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn-danger')) {
        let id = e.target.dataset.id
        axios({
            url: '/student/delete',
            method: 'DELETE',
            params: { id }
        }).then(res => {
            //成功回调
            console.log(res)
            if (res.data.code == 0) {
                Toast.success(res.data.message)
                //  重新加载列表
                studentData()
            }
        })
    }
})

//  7.点击修改按钮，弹出模态框
document.querySelector('tbody').addEventListener('click', function (e) {
    //1.弹出模态框
    //(1)设置模态框标题和按钮文字
    document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
    document.querySelector('.btnAddStudent').innerText = '确认编辑'
    if (e.target.classList.contains('btn-primary')) {
        //  弹出模态框
        $('#addModal').modal('show')
        //  默认加载省数据
        axios({
            url: '/geo/province',
            method: 'get',
        }).then(res => {
            //成功回调
            console.log(res)
            //  渲染省数据
            //  (1) 先把服务器返回的数据渲染成数组
            let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
            //  (2)在数组最前面添加默认option标签
            arr.unshift(`<option value="">--省--</option>`)
            //  (3)数组拼接之后渲染到页面
            document.querySelector('[name="province"]').innerHTML = arr.join('')
        })

        //根据id加载当前修改的学员信息
        const id = e.target.dataset.id
        axios({
            url: '/student/one',
            method: 'get',
            params: { id }
        }).then(res => {
            //成功回调
            let data = res.data.data
            console.log(data)
            //3. 填充表单数据
            document.querySelector('[name="name"]').value = data.name
            document.querySelector('[name="age"]').value = data.age
            document.querySelector('[name="group"]').value = data.group
            // 性别
            if (data.sex == '男') {
                document.querySelectorAll('[name="sex"]')[0].checked = true
            } else {
                document.querySelectorAll('[name="sex"]')[1].checked = true
            }
            document.querySelector('[name="phone"]').value = data.phone
            document.querySelector('[name="salary"]').value = data.salary
            document.querySelector('[name="truesalary"]').value = data.truesalary
            //省数据在弹窗出现的时候会自动加载，所以 能够直接修改value
            document.querySelector('[name="province"]').value = data.province
            //市和县需要单独渲染
            document.querySelector('[name="city"]').innerHTML = `<option>${data.city}</option>`
            document.querySelector('[name="county"]').innerHTML = `<option>${data.county}</option>`
        })
        //  3.编辑按钮ajax多一个参数id，就可以把'修改按钮id' 传递给 '模态框确认按钮'
        document.querySelector('.btnAddStudent').dataset.id = id
    }
})
//  7.2加载市，监听省change事件
document.querySelector('[name="province"]').addEventListener('change', function () {
    // (1)获取当前选择的省
    const pname = this.value
    // (2)只要用户修改了省，之前选择的市和县都要恢复默认值
    document.querySelector('[name="city"]').innerHTML = `<option value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option value="">--区/县--</option>`
    // (3)如果用户没有选择省，不需要加载市数据
    if (pname == '') {
        return
    }
    axios({
        url: '/geo/city',
        method: 'get',
        params: { pname }
    }).then(res => {
        //成功回调
        console.log(res)
        //  渲染市数据
        //  (1) 先把服务器返回的数据渲染成数组
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //  (2)在数组最前面添加默认option标签
        arr.unshift(`<option value="">--市--</option>`)
        //  (3)数组拼接之后渲染到页面
        document.querySelector('[name="city"]').innerHTML = arr.join('')
    })
})


//  7.3加载县/区，监听省change事件
document.querySelector('[name="city"]').addEventListener('change', function () {
    // (1)获取当前选择的省和市
    const pname = document.querySelector('[name="province"]').value
    const cname = this.value
    // (2)只要用户修改了市，之前选择的县就要恢复默认值
    document.querySelector('[name="county"]').innerHTML = `<option value="">--区/县--</option>`
    // (3)如果用户没有选择市，不需要加载县/区数据
    if (cname == '') {
        return
    }
    // (4)发送ajax
    axios({
        url: '/geo/county',
        method: 'get',
        params: { pname, cname }
    }).then(res => {
        //成功回调
        console.log(res)
        //  渲染市数据
        //  (1) 先把服务器返回的数据渲染成数组
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //  (2)在数组最前面添加默认option标签
        arr.unshift(`<option value="">--区/县--</option>`)
        //  (3)数组拼接之后渲染到页面
        document.querySelector('[name="county"]').innerHTML = arr.join('')
    })
})

